import React from 'react';
import { Card, Space, Button, Statistic, Modal, Form, InputNumber, Select, Input, message } from 'antd';
import { DollarCircleOutlined } from '@ant-design/icons';

export default function WalletTopup() {
  const [nickName, setNickName] = React.useState('示例用户');
  const [userWallet, setUserWallet] = React.useState(1200.00);
  const [userUnpaidWallet, setUserUnpaidWallet] = React.useState(80.00);
  const [userFrozenWallet, setUserFrozenWallet] = React.useState(150.00);
  const [rechargeTotal, setRechargeTotal] = React.useState(5000.00);
  const [userWithdrawalWallet, setUserWithdrawalWallet] = React.useState(300.00);

  // 额度与信息弹窗
  const [dialogCzEduVisible, setDialogCzEduVisible] = React.useState(false);
  const [dialogRecharge, setDialogRecharge] = React.useState(false);
  const [dialogEduVisible, setDialogEduVisible] = React.useState(false);
  const [dialogInfoVisible, setDialogInfoVisible] = React.useState(false);

  const [localprice, setLocalprice] = React.useState();
  const [formRecharge] = Form.useForm();
  const [formWithdrawInfo] = Form.useForm();

  const bankNameSet = [
    { value: '中国银行', label: '中国银行' },
    { value: '工商银行', label: '工商银行' },
    { value: '建设银行', label: '建设银行' },
  ];

  function handleTopup() {
    setLocalprice(undefined);
    setDialogCzEduVisible(true);
  }

  function nextTopup() {
    if (!localprice) {
      message.warning('请输入充值金额');
      return;
    }
    if (Number(localprice) < 100) {
      message.warning('最小充值金额为 100');
      return;
    }
    setDialogCzEduVisible(false);
    setDialogRecharge(true);
    formRecharge.setFieldsValue({ amount: Number(localprice), method: '支付宝' });
  }

  function confirmRecharge() {
    formRecharge.validateFields().then(values => {
      const add = Number(values.amount || 0);
      setDialogRecharge(false);
      setUserWallet(b => b + add);
      setRechargeTotal(t => t + add);
      message.success(`充值成功：¥${add.toFixed(2)}（示例）`);
    });
  }

  function handleWithdrawal() {
    setLocalprice(undefined);
    setDialogEduVisible(true);
  }

  function nextWithdrawal() {
    if (!localprice || Number(localprice) === 0) {
      message.warning('请输入提现金额');
      return;
    }
    if (Number(localprice) > userWallet) {
      message.warning('钱包余额不足');
      return;
    }
    setDialogEduVisible(false);
    setDialogInfoVisible(true);
    formWithdrawInfo.resetFields();
  }

  function handleTotal() {
    setLocalprice(userWallet);
  }

  function confirmWithdrawInfo() {
    formWithdrawInfo.validateFields().then(values => {
      const amount = Number(localprice || 0);
      setDialogInfoVisible(false);
      setUserWallet(w => w - amount);
      setUserWithdrawalWallet(t => t + amount);
      message.success('提现申请已提交（示例）');
    });
  }

  return (
    <div>
      {/* 钱包概览 */}
      <Card style={{ padding: 15 }}>
        <div style={{ width: '100%', display: 'flex', flexWrap: 'wrap', gap: 24 }}>
          <div style={{ minWidth: 220 }}>
            <div style={{ padding: '10px 0', fontSize: 16 }}>钱包余额</div>
            <Space direction="vertical">
              <h2 style={{ fontSize: 25 }}>$ {userWallet.toFixed(2)}</h2>
              <Space>
                <Button type="primary" size="small" onClick={handleTopup}>充值</Button>
                <Button type="default" size="small" onClick={handleWithdrawal}>提现</Button>
              </Space>
            </Space>
          </div>
          <div style={{ minWidth: 220 }}>
            <div style={{ padding: '10px 0', fontSize: 16 }}>未结清金额</div>
            <h2 style={{ fontSize: 25, color: 'red' }}>$ {userUnpaidWallet.toFixed(2)}</h2>
          </div>
          <div style={{ minWidth: 220 }}>
            <div style={{ padding: '10px 0', fontSize: 16, marginTop: 10 }}>冻结金额</div>
            <h2 style={{ fontSize: 20 }}>$ {userFrozenWallet.toFixed(2)}</h2>
          </div>
          <div style={{ minWidth: 220 }}>
            <div style={{ padding: '10px 0', fontSize: 16, marginTop: 10 }}>累计充值</div>
            <h2 style={{ fontSize: 20 }}>$ {rechargeTotal.toFixed(2)}</h2>
          </div>
          <div style={{ minWidth: 220 }}>
            <div style={{ padding: '10px 0', fontSize: 16, marginTop: 10 }}>累计提现</div>
            <h2 style={{ fontSize: 20 }}>$ {userWithdrawalWallet.toFixed(2)}</h2>
          </div>
        </div>
      </Card>

      {/* 充值额度弹窗 */}
      <Modal title="钱包充值" open={dialogCzEduVisible} onOk={nextTopup} onCancel={() => setDialogCzEduVisible(false)} width={400}>
        <div style={{ lineHeight: '35px' }}>
          <span style={{ color: 'red' }}>*</span>
          <span>请输入充值金额</span>
        </div>
        <InputNumber value={localprice} onChange={setLocalprice} precision={2} min={1} style={{ width: '100%' }} placeholder="请输入充值金额" />
        <div style={{ color: 'red', marginTop: 5 }}>最小充值金额为 100</div>
      </Modal>

      {/* 充值确认弹窗 */}
      <Modal title="确认充值" open={dialogRecharge} onOk={confirmRecharge} onCancel={() => setDialogRecharge(false)} width={400}>
        <Form form={formRecharge} layout="vertical" initialValues={{ amount: localprice, method: '支付宝' }}>
          <Form.Item name="amount" label="充值金额(¥)" rules={[{ required: true }]}> 
            <InputNumber min={1} precision={2} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="method" label="支付方式" rules={[{ required: true }]}> 
            <Select options={[{ value: '支付宝', label: '支付宝' }, { value: '微信', label: '微信' }, { value: '银行卡', label: '银行卡' }]} />
          </Form.Item>
        </Form>
      </Modal>

      {/* 提现额度弹窗 */}
      <Modal title="钱包提现" open={dialogEduVisible} onOk={nextWithdrawal} onCancel={() => setDialogEduVisible(false)} width={400}>
        <div style={{ lineHeight: '35px' }}>
          <span style={{ color: 'red' }}>*</span>
          <span>请输入提现金额</span>
        </div>
        <InputNumber value={localprice} onChange={setLocalprice} precision={2} min={1} style={{ width: '100%' }} placeholder="请输入提现金额" />
        <div onClick={handleTotal} style={{ width: '100%', lineHeight: '40px', color: '#409eff', cursor: 'pointer' }}>全部提现</div>
      </Modal>

      {/* 提现信息弹窗 */}
      <Modal title="提现信息" open={dialogInfoVisible} onOk={confirmWithdrawInfo} onCancel={() => setDialogInfoVisible(false)} width={400}>
        <Form form={formWithdrawInfo} layout="vertical">
          <Form.Item name="truename" label="收款人姓名" rules={[{ required: true, message: '请输入收款人姓名' }]}>
            <Input placeholder="请输入收款人姓名" />
          </Form.Item>
          <Form.Item name="cardnumber" label="银行卡号" rules={[{ required: true, message: '请输入银行卡号' }]}>
            <Input placeholder="请输入银行卡号" />
          </Form.Item>
          <Form.Item name="cardname" label="收款银行" rules={[{ required: true, message: '请输入收款银行' }]}>
            <Select options={bankNameSet} placeholder="选择银行" />
          </Form.Item>
          <Form.Item name="password" label="登录密码" rules={[{ required: true, message: '请输入登录密码' }]}>
            <Input.Password placeholder="请输入登录密码" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}